﻿<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>粒子排斥demo</title>

    <style>
        body, html {
            margin: 0;
            width: 100%;
            overflow: hidden;
        }

        canvas {
            width: 100%;
        }

        #controller {
            display: flex;
            align-items: center;
            justify-content: center;
            position: fixed;
            left: 0;
            top: 0;
        }

        .controls {
            display: inline-block;
            border: 0;
            margin: 0;
            /*padding: 15px;*/
            outline: none;
            text-align: center;
            height: 50px;
            width: 150px;
        }

        label {
            display: inline-block;
            padding: 16px;
            background: #333;
            outline: none;
            color: #fff;
            text-align: center;
            height: 20px;
            width: 70px;
        }

    </style>
</head>
<body>
<div id="controller">
    <!--想要跳过前一个默认参数调用函数,得通过undefined对象!!-->
    <label for="text">text:</label>
    <input class="controls" type="text" value="Hello ES6 !" id="text" onchange="changeText(this.value)">
    <label for="fontSize">size:</label>
    <input class="controls" id="fontSize" value="120" type="number" onchange="changeText(undefined,this.value)"
           min="100" max="1000">
    <label for="fontFamily">font:</label>
    <select id="fontFamily" class="controls" onchange="changeText(undefined,undefined,this.value)" value="serif">
        <option value="serif">Serif</option>
        <option value="sans-serif">Sans-Serif</option>
        <option value="cursive">Cursive</option>
        <option value="fantasy">Fantasy</option>
        <option value="monospace">Monospace</option>
    </select>
    <!--dom预处理:可以直接通过id选择器(对象)代表元素对象-->
</div>

<canvas id="canvas"></canvas>

<script src="main.js"></script>

</body>
</html>